<template>
	<view class="task-container">
		<!-- 顶部标签栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
				@click="switchTab(index)">
				<text>{{ tab }}</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<view class="card" v-for="(item, idx) in contentList" :key="idx">
				<text class="card-text">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['待办', '进行中', '已完成', '警告通知'],
				currentTab: 0,
				contentList: [
					'信息通知:待办显示 同意/拒绝 点击打开查看详情信息',
					'进行中内容展示信息',
					'完成内容展示完成时间',
					'警告通知:车辆警告等',
					'车辆名称 发生事件 负责人 发生事件 ...'
				]
			};
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			}
		}
	};
</script>

<style scoped>
	/* 页面容器 */
	.task-container {
		padding: 15px;
		background-color: #fff;
	}

	/* 标签栏 */
	.tab-bar {
		display: flex;
		border: 1px solid #FFB600;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
		color: #333;
		border-right: 1px solid #FFB600;
	}

	.tab-item:last-child {
		border-right: none;
	}

	.tab-item.active {
		background-color: #FFB600;
		color: #fff;
	}

	/* 内容卡片 */
	.content {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.card {
		border: 1px solid #FFB600;
		border-radius: 12px;
		padding: 12px;
		font-size: 14px;
		color: #333;
		line-height: 1.6;
	}
</style>